<template>
  <div>
    <van-nav-bar title="领取积分"></van-nav-bar>
    <div class="integral_bg">
      <div class="integral_title ">{{activityObj.activeTitle}}</div>
      <img class="integral_img" src="../../assets/img/ig_bg.png" alt="">
      <img class="integralBox" src="../../assets/img/integralBox.png" alt="">
      <img @click="integralBtn" class="integral_btn" src="../../assets/img/integralBtn.png" alt="">
      <div class="number" >{{activityObj.activeScore}} 积分</div>
      <div class="integral_back " @click="calBack">点击返回公众号</div>
    </div>
  </div>
</template>
<script>
import apiHttp from '../../api/index'
import { Toast } from 'vant'
export default {
  data(){
    return{
      activityObj:{},
      userId:"",
      isEnjoy:"",
      actId:""
    }
  },
  methods:{
    getCode () { // 非静默授权，第一次有弹框
        const code = this.$options.methods.GetUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        const local = window.location.href
        if (code == null || code === '') {
          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb5737d355cccca0f&redirect_uri='+encodeURIComponent(local)+'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
        } else {
          this.register(code) //把code传给后台获取用户信息
        }
      },
      GetUrlParam(name){
          var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
          var r = window.location.search.substr(1).match(reg);     
          if(r!=null)return  unescape(r[2]); 
          return null;
      },
      register (code) { // 通过code获取 openId等用户信息
        let parmes = {
            code:code
        }
         apiHttp.apiIndex.register(parmes,resp=>{
          if(resp.resultCode == '000000'){
            this.active(resp.userId) 
          }else if(resp.resultCode == '000002'){
            this.active(resp.userId) 
          }
        })
      },
    active(userId){
      const activeId = this.$options.methods.GetUrlParam('activeId') 
      let params ={
          actId:activeId,
          userId:userId
        }
        apiHttp.activityDeat.getActById(params,resp=>{
          if(resp.resultCode == '000000'){
            this.activityObj = resp.data.act
            this.isEnjoy = resp.data.act.isEnjoy
            this.userId =userId
            this.activeTitle =resp.data.actactiveTitle
            this.actId =resp.data.act.id

          }else{
            Toast(resp.resultMsg)
          }
        })
    },
    // 点击按钮获取积分
    integralBtn(){
      if(this.isEnjoy == 1 ){
        Toast("请前往公众号中参与活动!!!")
      }else{
        this.integra()
      }
    },
    //  获取活动积分
    integra(){
      let params = {
          actId: this.actId,
          userId:this.userId
        }
        apiHttp.activityDeat.getActScore(params,resp=>{
          if(resp.resultCode == '000000'){
            Toast(resp.resultMsg)
          }else{
            Toast(resp.resultMsg)
          }
        })
    },
    calBack(){
      this.$router.push({path:"/"});
      console.log(1)
    }
    
  },
  mounted(){
   this.getCode()
   this.active()
  },
}
</script>
<style scoped>
  .integral_back{
    color: #ffffff;
    position: absolute;
    width: 50%;
    height: auto;
    left: 0%;
    right: 0px;
    margin-top: 11%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size:0.8;
  }
  .integral_title{
    position: absolute;
    width: 50%;
    height: auto;
    left: -17%;
    right: 0px;
    margin-top: 10%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 0.8rem;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .integral_bg{
    background: url("../../assets/img/integral_bg.png");
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    width: 100%
  }
  .integral_img{
    position: relative;
    margin: 0 auto;
    height:auto;
    width:70%;
    left:15%;
    right:0px;
    margin-top: 30%;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
  }
  .integral_btn{
    position: absolute;
    width: 50%;
    height: auto;
    left: 0%;
    right: 0px;
    margin-top: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .integralBox{
    position: absolute;
    width: 50%;
    height: auto;
    left: 0%;
    right: 0px;
    margin-top: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .number{
    position: absolute;
    width: 50%;
    height: auto;
    left: 0%;
    right: 0px;
    margin-top: -64%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    font-size: 1rem;
  }
</style>
